[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import FontTool from "@/components/font-tool" export default function HomePage() { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 215 20.2% 65.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Disable all transitions globally to prevent conflicts */ * { transition: none !important; } /* Re-enable only specific hover transitions we want */ button:hover { transition: background-color 0.15s ease !important; } [V0_FILE]typescriptreact:file="components/font-selector.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" export interface PopularFont { family: string weights: number[] category: string fallback: string } // Only fonts with multiple weights for better typography control export const POPULAR_FONTS: PopularFont[] = [ { family: "Inter", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Roboto", weights: [100, 300, 400, 500, 700, 900], category: "sans-serif", fallback: "sans-serif" }, { family: "Open Sans", weights: [300, 400, 500, 600, 700, 800], category: "sans-serif", fallback: "sans-serif" }, { family: "Lato", weights: [100, 300, 400, 700, 900], category: "sans-serif", fallback: "sans-serif" }, { family: "Montserrat", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Source Sans Pro", weights: [200, 300, 400, 600, 700, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Oswald", weights: [200, 300, 400, 500, 600, 700], category: "sans-serif", fallback: "sans-serif" }, { family: "Raleway", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "PT Sans", weights: [400, 700], category: "sans-serif", fallback: "sans-serif" }, { family: "Lora", weights: [400, 500, 600, 700], category: "serif", fallback: "serif" }, { family: "Merriweather", weights: [300, 400, 700, 900], category: "serif", fallback: "serif" }, { family: "Playfair Display", weights: [400, 500, 600, 700, 800, 900], category: "serif", fallback: "serif" }, { family: "Source Serif Pro", weights: [200, 300, 400, 600, 700, 900], category: "serif", fallback: "serif" }, { family: "Crimson Text", weights: [400, 600, 700], category: "serif", fallback: "serif" }, { family: "Libre Baskerville", weights: [400, 700], category: "serif", fallback: "serif" }, { family: "Roboto Slab", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "serif", fallback: "serif", }, { family: "Poppins", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Nunito", weights: [200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Ubuntu", weights: [300, 400, 500, 700], category: "sans-serif", fallback: "sans-serif" }, { family: "Roboto Condensed", weights: [300, 400, 700], category: "sans-serif", fallback: "sans-serif" }, { family: "Fira Sans", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Work Sans", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Noto Sans", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "Dancing Script", weights: [400, 500, 600, 700], category: "handwriting", fallback: "cursive" }, { family: "Barlow", weights: [100, 200, 300, 400, 500, 600, 700, 800, 900], category: "sans-serif", fallback: "sans-serif", }, { family: "DM Sans", weights: [400, 500, 700], category: "sans-serif", fallback: "sans-serif" }, { family: "Manrope", weights: [200, 300, 400, 500, 600, 700, 800], category: "sans-serif", fallback: "sans-serif" }, ] interface FontSelectorProps { selectedFont: PopularFont | null onFontChange: (font: PopularFont) => void } // Font loading cache to prevent duplicate loads const loadedFonts = new Set() const loadFont = (font: PopularFont) => { const fontKey = font.family if (loadedFonts.has(fontKey)) return const fontName = font.family.replace(/ /g, "+") const weights = font.weights.join(";") const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}:wght@${weights}&display=swap` const link = document.createElement("link") link.rel = "stylesheet" link.href = fontUrl link.onload = () => loadedFonts.add(fontKey) document.head.appendChild(link) } export function FontSelector({ selectedFont, onFontChange }: FontSelectorProps) { const [open, setOpen] = React.useState(false) const [searchTerm, setSearchTerm] = React.useState("") const filteredFonts = React.useMemo(() => { if (!searchTerm) return POPULAR_FONTS return POPULAR_FONTS.filter((font) => font.family.toLowerCase().includes(searchTerm.toLowerCase())) }, [searchTerm]) const handleFontSelect = React.useCallback( (font: PopularFont) => { loadFont(font) onFontChange(font) setOpen(false) }, [onFontChange], ) return ( No font found. {filteredFonts.map((font) => ( handleFontSelect(font)} className="cursor-pointer" >

{font.family} {font.category} • {font.weights.length} weights

))} ) } [V0_FILE]typescriptreact:file="components/font-tool.tsx" isEdit="true" "use client" import type React from "react" import { useState, useMemo, useCallback, useEffect } from "react" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import { Input } from "@/components/ui/input" import { RotateCcw, AlignLeft, AlignCenter, AlignRight, ChevronLeft, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" import { FontSelector, type PopularFont, POPULAR_FONTS } from "./font-selector" const weightNameMapping: { [key: number]: string } = { 100: "Thin", 200: "Extra Light", 300: "Light", 400: "Regular", 500: "Medium", 600: "Semi Bold", 700: "Bold", 800: "Extra Bold", 900: "Black", } // Get Inter as the default font const DEFAULT_FONT = POPULAR_FONTS.find((font) => font.family === "Inter") || POPULAR_FONTS[0] const FontTool = () => { const [selectedFont, setSelectedFont] = useState(DEFAULT_FONT) const [fontSize, setFontSize] = useState(102) const [previewText, setPreviewText] = useState("Inter") const [selectedWeightValue, setSelectedWeightValue] = useState(400) const [textAlign, setTextAlign] = useState<"left" | "center" | "right">("center") // Load the default font on component mount useEffect(() => { if (DEFAULT_FONT) { const fontName = DEFAULT_FONT.family.replace(/ /g, "+") const weights = DEFAULT_FONT.weights.join(";") const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}:wght@${weights}&display=swap` const link = document.createElement("link") link.id = "default-font-link" link.rel = "stylesheet" link.href = fontUrl document.head.appendChild(link) } }, []) const availableWeights = useMemo(() => { if (!selectedFont) return [{ name: "Regular", value: 400 }] return selectedFont.weights .filter((w) => weightNameMapping[w]) .sort((a, b) => a - b) .map((w) => ({ name: weightNameMapping[w], value: w })) }, [selectedFont]) const handleFontChange = useCallback( (font: PopularFont) => { setSelectedFont(font) setPreviewText(font.family) // Reset to default weight if current weight isn't available if (!font.weights.includes(selectedWeightValue)) { const defaultWeight = font.weights.includes(400) ? 400 : font.weights[0] setSelectedWeightValue(defaultWeight) } }, [selectedWeightValue], ) const currentWeightIndex = useMemo(() => { return availableWeights.findIndex((fw) => fw.value === selectedWeightValue) }, [selectedWeightValue, availableWeights]) const handleReset = useCallback(() => { setSelectedFont(DEFAULT_FONT) setFontSize(102) setPreviewText("Inter") setSelectedWeightValue(400) setTextAlign("center") }, []) const selectPreviousWeight = useCallback(() => { if (currentWeightIndex > 0) { setSelectedWeightValue(availableWeights[currentWeightIndex - 1].value) } }, [currentWeightIndex, availableWeights]) const selectNextWeight = useCallback(() => { if (currentWeightIndex < availableWeights.length - 1) { setSelectedWeightValue(availableWeights[currentWeightIndex + 1].value) } }, [currentWeightIndex, availableWeights]) const handleFontSizeChange = useCallback((value: number[]) => { setFontSize(value[0]) }, []) const handleTextAlignChange = useCallback((value: "left" | "center" | "right" | "") => { if (value) setTextAlign(value) }, []) const handlePreviewTextChange = useCallback((e: React.ChangeEvent) => { setPreviewText(e.target.value) }, []) return (

{selectedFont ? `${selectedFont.category} | ${selectedFont.weights.length} weights available` : "Select a font to begin"}

Single styles from 50 CHF

Complete subfamily from 300 CHF

{fontSize}px

{availableWeights.map((weight) => ( ))}

) } export default FontTool

About

Tags

Share

About

Tags

Share

More from laugebirchlorup

More Templates Like This

About

Tags

Share

About

Tags

Share

More from laugebirchlorup

More Templates Like This